<template>
    <div>
        <!-- 头部导航 -->
        <div class="navbar">
            <img class="tb" src="/img/fh.png" alt="" @click="onClickLeft">
            <span>上门遛狗</span>
        </div>
        <div class="kkk"></div>
        <!-- 中间图片 -->
        <img src="/img/dog.jpg" class="wm" alt="">
        <!-- 中間內容 -->
        <div class="center">
            <h3>上门遛狗服务</h3>
             <div>
                <img class="tb" src="/img/fx.png" alt="">
              <van-cell  title="分享" @click="showShare = true" />
                <van-share-sheet
                    v-model="showShare"
                    title="立即分享给好友"
                    :options="options"
                    @select="onSelect"
                    />  
            <!-- <img class="tb" src="/img/fx.png" alt="">
            <span class="s">分享</span> -->
            </div>
            <span class="s1">￥<h1>100</h1>/次</span>
            <div class="center-one">
                <ul>
                    <li>
                        <img class="img" src="/img/wc.png" alt="">
                        <span>全程视频直播</span>
                    </li>
                     <li>
                         <img class="img" src="/img/wc.png" alt="">
                        <span>一对一线上客服</span>
                    </li>
                     <li>
                        <img class="img" src="/img/wc.png" alt=""> 
                        <span>6小时内完成派单</span>
                    </li>
                </ul>
            </div>
            <div class="center-two" @click="govip">
                <div>
                    <span class="span-one">优惠</span>
                    <span class="span-two">开通年卡单单享9折</span>
                    <span class="span-three">立即开通</span>
                </div>
            </div>
        </div>
        <!-- 底部导航部分 -->
        <van-tabs v-model="activeName" title-inactive-color="#999" title-active-color="#000" color="#f8e176">
        <van-tab title="服务介绍" name="a">
            <img class="wm-lag" src="/img/dog-lag.jpg" alt="">
        </van-tab>
        <!-- <van-tab title="伴宠日记" name="b">
           <div class="b">
               <img src="/img/wm.jpg" class="b-img" alt="">
               <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
               <span class="span1">深圳市 2022-04-06</span>
               <img src="/img/wm.jpg" class="tx" alt="">
               <span class="span2">我是谁</span>
           </div>
        </van-tab> -->
        <van-tab title="服务评价" name="c">
            <div class="c">
                <img src="/img/wm.jpg" class="tx1" alt="">
               <span class="span3">这是一个网友</span>
               <span class="span4">2022-03-04</span>
               <img src="/img/wjx.png"  class="wjx" alt="">
               <img src="/img/wjx.png"  class="wjx" alt="">
               <img src="/img/wjx.png"  class="wjx" alt="">
               <img src="/img/wjx.png"  class="wjx" alt="">
               <img src="/img/wjx.png"  class="wjx" alt="">
               <span class="span5">系统默认好评</span>
            </div>
        </van-tab>
        </van-tabs>
        <!--底部预定部分 -->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" />
            <van-goods-action-button @click="go" color="#f8e176" type="warning" text="立即预定" />
        </van-goods-action>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeName: 'a',
                showShare: false,
                options: [
                    { name: '微信', icon: 'wechat' },
                    { name: '微博', icon: 'weibo' },
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                ],
            }
        },
        methods: {
             govip() {
      this.$router.push("/vip")
      // .catch(err => { console.log(err) });
    },
            onSelect(option) {
                Toast(option.name);
                this.showShare = false;
            },
            //返回首页
            onClickLeft() {
                this.$router.push('/')
            },
             go() {
                this.$router.push('/dogshopping')
            },
        },
    }
</script>

<style lang="scss" src="../../assets/css/catanddog.scss" scoped>